<template>
    <el-row type="flex" justify="space-between" class="container">
      <div class="main">
        <!-- 面包屑标题 -->
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item to="/post">旅游攻略</el-breadcrumb-item>
            <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
  
        <!-- 文章大标题 -->
        <h1>{{ detail.title }}</h1>
  
        <!-- 文章信息 -->
        <div class="post-info">
          <span>攻略：{{ detail.created_at | timestamp }}</span>
          <span>阅读：{{ detail.watch }}</span>
        </div>
  
        <!-- 文章内容 -->
        <div class="post-content" v-html="detail.content"></div>
  
        <!-- 文章分享 -->
        <div class="post-ctrl">
          <el-row type="flex" justify="center">
            <div class="ctrl-item">
              <i class="iconfont icon-pinglun"></i>
              <p>评论({{ commentsTotal }})</p>
            </div>
  
            <!-- 收藏 -->
            <div class="ctrl-item" @click="handleStar">
              <i
                class="iconfont"
                :class="{
                  'icon-shoucang': !isFavorited,
                  'icon-yishoucang': isFavorited,
                }"
              ></i>
              <p>{{ isFavorited ? "已收藏" : "收藏" }}</p>
            </div>
            <!-- <div class="ctrl-item" @click="handleStar" >
              <i class="iconfont icon-jiaxingshoucang" ></i>
              <p>收藏</p>
            </div> -->
  
            <!-- 分享 -->
            <div class="ctrl-item" @click="handleShare">
              <i class="iconfont icon-fenxiang"></i>
              <p>分享</p>
            </div>
            <!-- 分享弹窗 -->
            <el-dialog
              title="分享文章"
              :visible.sync="shareDialogVisible"
              width="30%"
            >
              <div style="text-align: center">
                <p>使用以下链接分享这篇文章：</p>
                <el-input type="text" :value="currentUrl" readonly>
                  <template #append>
                    <el-button
                      type="text"
                      icon="el-icon-copy"
                      @click="copyToClipboard"
                      >复制</el-button
                    >
                  </template>
                </el-input>
              </div>
            </el-dialog>
            <!-- <div class="ctrl-item" @click="$message.warning('暂不支持分享')">
              <i class="iconfont icon-fenxiang"></i>
              <p>分享</p>
            </div> -->
  
            <!-- 点赞 -->
            <div class="ctrl-item" @click="handleLike">
              <i class="iconfont icon-dianzan"></i>
              <p likes-count>({{ likes }})</p>
            </div>
          </el-row>
        </div>
  
        <!-- 文章评论 -->
        <div class="cmt-wrapper">
          <h4 class="cmt-title">评论</h4>
  
          <el-tag
            closable
            type="info"
            class="replyTag"
            v-if="reply.nickname"
            @close="handleCloseReply"
          >
            回复 @{{ reply.nickname }}
          </el-tag>
  
          <!-- 评论输入框 -->
          <div class="cmt-input" ref="cmtInput">
            <el-input
              type="textarea"
              resize="none"
              placeholder="说点什么吧..."
              v-model="cmtForm.content"
            >
            </el-input>
          </div>
          <el-row type="flex" justify="space-between" class="cmt-input-ctrls">
            <div class="cmt-pics">
              <el-upload
                :action="$axios.defaults.baseURL + `/upload`"
                list-type="picture-card"
                name="files"
                :file-list="cmtForm.pics"
                :on-success="handleSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="beforeUpload"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>
            <div>
              <el-button
                type="primary"
                size="mini"
                class="cmt-submit"
                @click="handleCmtSubmit"
              >
                提交
              </el-button>
            </div>
          </el-row>
  
          <!-- 无评论时 -->
          <div class="cmt-empty" v-if="!commentsTotal">
            暂无评论，赶紧抢占沙发！
          </div>
  
          <!-- 评论列表 -->
          <div class="cmt-list" v-if="commentsTotal">
            <div class="cmt-item" v-for="(item, index) in comments" :key="index">
              <div class="cmt-info">
                <img
                  :src="$axios.defaults.baseURL + item.account.defaultAvatar"
                />
                {{ item.account.nickname }}
                <i>{{ item.created_at | timestamp }}</i>
                <span>{{ item.level }}</span>
              </div>
              <div class="cmt-content">
                <!-- 评论楼层 -->
                <CommentFloor
                  v-if="item.parent"
                  :comment="item.parent"
                  @preview="handlePictureCardPreview"
                  @reply="handleReply"
                />
  
                <div class="cmt-new">
                  <p class="cmt-message">
                    {{ item.content }}
                  </p>
                  <el-row type="flex">
                    <div
                      class="cmt-pic"
                      v-for="(pic, picIndex) in item.pics"
                      :key="picIndex"
                    >
                      <img
                        :src="$axios.defaults.baseURL + pic.url"
                        @click="handlePictureCardPreview(pic)"
                      />
                    </div>
                  </el-row>
                  <div class="cmt-ctrl">
                    <a href="javascript:;" @click="handleReply(item)">回复</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <!-- 分页 -->
          <el-row
            type="flex"
            justify="center"
            v-if="commentsTotal"
            style="margin-top: 10px"
          >
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Math.floor(start / limit) + 1"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="commentsTotal"
            >
            </el-pagination>
          </el-row>
        </div>
      </div>
  
      <div class="aside">
        <!-- 推荐文章 -->
        <h4 class="aside-title">相关攻略</h4>
        <div class="recommend-list">
          <nuxt-link
            :to="`/post/detail?id=${item.id}`"
            class="recommend-item"
            v-for="(item, index) in recommends"
            :key="index"
          >
            <el-row type="flex" class="post-imgText">
              <el-row
                type="flex"
                align="middle"
                class="post-img"
                v-if="item.images[0]"
              >
                <img :src="item.images[0]" alt="" />
              </el-row>
              <div class="post-text">
                <div>
                  {{ item.title }}
                </div>
                <p>{{ item.created_at | timestamp }} 阅读 {{ item.watch }}</p>
              </div>
            </el-row>
          </nuxt-link>
        </div>
      </div>
    </el-row>
  </template>
  
  <script>
  import CommentFloor from "@/components/post/commentFloor";
  import moment from "moment";
  
  export default {
    data() {
      return {
        dialogImageUrl: "",
        dialogVisible: false,
        detail: {},
        comments: [],
        commentsTotal: 0,
        likes: 0, //点赞
        isFavorited: false, //收藏
        shareDialogVisible: false, //分享
        currentUrl: "", // 初始化URL为空字符串
  
        // filters
        start: 0,
        limit: 5,
  
        // comment form
        cmtForm: {
          content: "",
          pics: [],
        },
  
        reply: {},
        recommends: [],
      };
    },
  
    // Vue组件生命周期钩子，在组件创建时执行
    created() {
      const { id } = this.$route.query;
      this.loadLikes(id);
  
      this.$axios({
        url: `/posts/${id}`,
      }).then((res) => {
        // 设置文章详情在请求成功后
        const { data } = res;
        this.detail = data;
        // 读取并设置收藏状态
        let storedItem = window.localStorage.getItem(`article_favorite_${id}`);
        this.isFavorited = storedItem === "true";
      });
    },
  
    methods: {
      handleSuccess(file, fileList) {
        file[0].url = this.$axios.defaults.baseURL + file[0].url;
        this.cmtForm.pics.push(file[0]);
      },
      handleRemove(file, fileList) {
        this.cmtForm.pics = fileList;
      },
      beforeUpload(file) {
        const type = file.type;
        const isverify = [
          "image/png",
          "image/jpeg",
          "image/jpg",
          "image/gif",
        ].includes(type);
  
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isverify) {
          this.$message.error("上传图片格式只支持 jpg、png、gif 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 2MB!");
        }
  
        return isverify && isLt2M;
      },
      handleCmtSubmit() {
        const {
          api,
          user: { userInfo },
        } = this.$store.state;
  
        this.cmtForm = {
          ...this.cmtForm,
          post: this.$route.query.id,
        };
  
        if (this.cmtForm.content.trim() == "" && this.cmtForm.pics.length == 0) {
          this.$message.error("评论的内容不能为空");
          return;
        }
  
        this.$axios({
          url: api.COMMENTS,
          method: "POST",
          data: this.cmtForm,
          headers: {
            Authorization: `Bearer ${userInfo.token}`,
          },
        }).then((res) => {
          const { message, status } = res.data;
          if (status == 0) {
            this.$message({
              message,
              type: "success",
            });
  
            this.cmtForm = {
              content: "",
              pics: [],
            };
  
            this.getComments();
          }
        });
      },
  
      handlePictureCardPreview(file) {
        console.log(file);
        if (file.response) {
          file = file.response[0];
        }
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleReply(comment) {
        this.reply = comment.account;
        this.cmtForm.follow = comment.id;
        window.scrollTo(0, this.$refs.cmtInput.offsetTop);
      },
  
      handleCloseReply() {
        this.reply = {};
        this.cmtForm.follow = "";
      },
  
      getComments() {
        this.$axios({
          url: "/posts/comments",
          params: {
            post: this.$route.query.id,
            _start: this.start,
            _limit: this.limit,
          },
        }).then((res) => {
          const { data, total } = res.data;
          this.comments = data;
          this.commentsTotal = total;
        });
      },
      handleSizeChange(value) {
        this.limit = value;
        this.start = 0;
        this.getComments();
      },
  
      handleCurrentChange(value) {
        this.start = this.limit * (value - 1);
        this.getComments();
      },
  
      // 收藏
      handleStar() {
        // 切换收藏状态
        this.isFavorited = !this.isFavorited;
        // 将收藏状态保存到 localStorage
        let articleId = this.detail.id;
        window.localStorage.setItem(
          `article_favorite_${articleId}`,
          this.isFavorited.toString()
        );
        // 显示提示信息
        this.$message({
          message: this.isFavorited ? "已收藏" : "已取消收藏",
          type: "success",
        });
        //源代码
        // handleStar() {
        //   const {
        //     api,
        //     user: { userinfo },
        //   } = this.$store.state;
  
        //   this.$axios({
        //     url: api.POST_STAR,
        //     params: {
        //       id: this.detail.id,
        //     },
        //     headers: {
        //       Authorization: `Bearer ${userinfo.token}`,
        //     },
        //   }).then((res) => {
        //     const { status, message } = res.data;
        //     if (status == 0) {
        //       this.$message({
        //         message,
        //         type: "success",
        //       });
        //     }
        //   });
        // },
      },
  
      // 点赞
      handleLike() {
        this.likes++; // 点击时，点赞数量增加
        this.saveLikes(); // 保存点赞数量
      },
      saveLikes() {
        // 使用文章id作为键，与点赞数一起保存到LocalStorage
        localStorage.setItem(`article_likes_${this.detail.id}`, this.likes);
      },
      loadLikes(articleId) {
        // 确保在浏览器环境中执行
        if (typeof window !== "undefined") {
          const savedLikes = parseInt(
            localStorage.getItem(`article_likes_${articleId}`),
            10
          );
          if (!isNaN(savedLikes)) {
            this.likes = savedLikes;
          }
        }
        //源代码
        // handleLike(){
        //         const {api, user: {userinfo}} = this.$store.state;
        //         this.$axios({
        //             url: api.POST_LIKE,
        //             params: {
        //                 id: this.detail.id
        //             },
        //             headers: {
        //                 Authorization: `Bearer ${userinfo.token}`
        //             }
        //         }).then(res => {
        //             const {status, message} = res.data;
        //             if(status == 0){
        //                 this.$message({
        //                     message,
        //                     type: "success"
        //                 })
  
        //                 this.detail.like += 1;
        //             }
        //         })
        //     },
      },
  
      //分享
      handleShare() {
        // 显示分享对话框
        this.shareDialogVisible = true;
      },
      //复制链接到剪贴板的方法
      copyToClipboard() {
        if (navigator.clipboard) {
          // 使用 Clipboard API 复制文本
          navigator.clipboard
            .writeText(this.currentUrl)
            .then(() => {
              // 显示复制成功的消息
              this.$message({
                message: "链接已复制到剪贴板",
                type: "success",
              });
            })
            .catch((err) => {
              // 显示复制失败的消息
              console.error("复制到剪贴板失败: ", err);
              this.$message({
                message: "复制到剪贴板失败",
                type: "error",
              });
            });
        } else {
          // 如果 Clipboard API 不可用，则回退到旧行为
          const el = document.createElement("textarea");
          el.value = this.currentUrl;
          document.body.appendChild(el);
          el.select();
          try {
            var successful = document.execCommand("copy");
            var msg = successful ? "成功" : "失败";
            this.$message({
              message: `链接复制${msg}到剪贴板`,
              type: successful ? "success" : "error",
            });
          } catch (err) {
            console.error("Fallback: Oops, unable to copy", err);
            this.$message({
              message: "Fallback: Oops, unable to copy",
              type: "error",
            });
          }
          document.body.removeChild(el);
        }
      },
      
      // 推荐文章
      getPostRecmmend() {
        const { api } = this.$store.state;
  
        this.$axios({
          url: api.POST_RECOMMEND,
        }).then((res) => {
          const { data } = res.data;
          this.recommends = data;
        });
      },
    },
  
    components: {
      CommentFloor,
    },
  
    filters: {
      timestamp(value) {
        return moment(value).format("YYYY-MM-DD h:mm");
      },
    },
  
    watch: {
      $route() {
        window.location.reload();
      },
    },
  
    mounted() {
      const { id } = this.$route.query;
  
      this.$axios({
        url: `/posts/${id}`,
      }).then((res) => {
        const { data } = res;
        this.detail = data;
      });
  
      // 文章评论
      this.getComments(id);
      this.getPostRecmmend();
      this.currentUrl = window.location.href; // 将当前页面 URL 赋值给 currentUrl
      if (typeof window !== "undefined") {
        // 安全地使用 window 对象
      }
    },
  };
  </script>
  
  <style scoped lang="less">
  .container {
    width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
  }
  
  .main {
    width: 700px;
  
    h1 {
      padding: 20px 0;
      border-bottom: 1px #ddd solid;
    }
  
    .post-content {
      line-height: 1.5;
  
      /deep/ * {
        max-width: 700px !important;
      }
  
      /deep/ img {
        margin: 10px 0;
      }
    }
  
    .post-info {
      color: #999;
      padding: 20px;
      text-align: right;
  
      span {
        margin-left: 20px;
      }
    }
  
    .post-ctrl {
      padding: 50px 0 30px;
      .ctrl-item {
        margin: 0 20px;
        font-size: 20px;
        text-align: center;
        cursor: pointer;
  
        i {
          display: block;
          font-size: 30px;
          color: orange;
        }
  
        &:nth-child(2) {
          .i {
            transform: scale(1.4);
          }
        }
        .p {
          margin-top: 5px;
          font-size: 14px;
          color: #999;
        }
      }
    }
  
    /* 评论 */
    .cmt-wrapper {
      margin-bottom: 20px;
    }
  
    .replyTag {
      margin-bottom: 10px;
    }
  
    .cmt-title {
      font-weight: normal;
      font-size: 18px;
      margin-bottom: 20px;
    }
  
    .cmt-input {
      margin-bottom: 10px;
    }
  
    .cmt-input-ctrls {
      margin-bottom: 30px;
      /deep/ .el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
  
      /deep/ .el-upload-list {
        li {
          width: 100px;
          height: 100px;
        }
  
        img {
          object-fit: cover;
        }
      }
    }
  
    .cmt-empty {
      color: #999;
      font-size: 14px;
      text-align: center;
      padding: 30px 0;
      border: 1px #ddd dashed;
    }
  
    .cmt-list {
      border: 1px #ddd solid;
    }
  
    .cmt-item {
      border-bottom: 1px #ddd dashed;
      padding: 20px 20px 5px;
  
      &:last-child {
        border-bottom: none;
      }
  
      .cmt-content {
        padding: 0 0 0 30px;
      }
  
      .cmt-info {
        margin-bottom: 10px;
        font-size: 12px;
        color: #666;
  
        * {
          vertical-align: top;
        }
  
        img {
          width: 16px;
          height: 16px;
          border-radius: 50%;
        }
  
        i {
          color: #999;
        }
        span {
          float: right;
        }
      }
      .cmt-message {
        margin-top: 10px;
      }
  
      .cmt-pic {
        width: 80px;
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
        margin-right: 5px;
        margin-top: 10px;
        padding: 5px;
        border: 1px #ddd dashed;
  
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          cursor: pointer;
        }
      }
  
      /*  这里和comment floor不一样，鼠标在最新内容上才hover */
      .cmt-new:hover {
        .cmt-ctrl {
          * {
            display: inline;
          }
        }
      }
  
      .cmt-ctrl {
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #1e50a2;
        text-align: right;
  
        * {
          display: none;
        }
  
        a:hover {
          text-decoration: underline;
        }
      }
    }
  }
  
  /* 侧边栏 */
  .aside {
    width: 280px;
  
    .aside-title {
      font-weight: normal;
      font-size: 18px;
      padding-bottom: 10px;
      border-bottom: 1px #ddd solid;
    }
  
    .recommend-item {
      display: block;
      padding: 20px 0;
      border-bottom: 1px #ddd solid;
  
      .post-imgText {
        height: 80px;
  
        .post-img {
          width: 100px;
          height: 80px;
          flex-shrink: 0;
          background: #ddd;
          overflow: hidden;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
  
        .post-text {
          flex: 1;
          position: relative;
          div {
            position: relative;
            line-height: 1.4em;
            /*设置容器高度为3倍行高就是显示3行*/
            height: 2.8em;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
          }
  
          p {
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
  </style>
  